<script setup lang="ts">
defineProps(['NameData'])
import { reactive, ref } from 'vue';
import type { FormInstance } from 'ant-design-vue';
const expand = ref(false);
const formRef = ref<FormInstance>();
const onFinish = (values: any) => {
    console.log('Received values of form: ', values);
    console.log('formState: ', formState);
};
const formState: any = reactive({});
</script>

<template>
    <a-form ref="formRef" name="advanced_search" class="ant-advanced-search-form" :model="formState" @finish="onFinish">
        <a-row :gutter="24">
            <template v-for="(item, index) in NameData" :key="index">
                <a-col v-show="expand || index <= 6" :span="4">
                    <a-form-item :name="item" :label="item" :rules="[{ required: true, message: 'input something' }]">
                        <a-input v-model:value="formState[item]" placeholder="placeholder"></a-input>
                    </a-form-item>
                </a-col>
            </template>
            <a-col :span="4" style="text-align: right">
                <a-button type="primary" html-type="submit">搜索</a-button>
            </a-col>
        </a-row>
    </a-form>

</template>